<template>
  <div id="app-container">

    <div class="el-card__body">
      <div data-v-ebcc336a="">
        <i data-v-ebcc336a="" class="el-icon-search" />
        <span data-v-ebcc336a="">
          筛选搜索
        </span>
      </div>

      <el-form :inline="true" :model="listQuey" size="small" label-width="140px">
        <el-form-item label="输入搜索：">
          <el-input v-model="listQuey.orderSn" class="input-width" placeholder="订单编号" />
        </el-form-item>
        <el-form-item label="收货人：">
          <el-input v-model="listQuey.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码" />
        </el-form-item>
        <el-form-item label="提交时间：">
          <el-date-picker
            v-model="listQuey.createTime"
            class="input-width"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="订单状态：">
          <el-select v-model="listQuey.status" class="input-width" placeholder="全部" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单分类：">
          <el-select v-model="listQuey.orderType" class="input-width" placeholder="全部" clearable>
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="订单来源：">
          <el-select v-model="listQuey.sourceType" class="input-width" placeholder="全部" clearable>
            <el-option
              v-for="item in sourceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" />
      <span>数据列表</span>
    </el-card>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="编号" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单编号">
        <template slot-scope="scope">
          {{ scope.row.oid }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交时间">
        <template slot-scope="scope">
          {{ scope.row.time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户账号">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="支付方式">
        <template slot-scope="scope">
          {{ scope.row.pay }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单来源">
        <template slot-scope="scope">
          {{ scope.row.source }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" :inline="true" @click="handleUpate(row)">查看订单</el-button>
          <el-button type="danger" size="mini" :inline="true" @click="handleDelete(row, $index)">删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <!-- Edit dialog -->
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="dataForm" :model="temp" :rules="rules">
        <el-form-item label="订单编号" prop="id">
          <el-input v-model="temp.oid" />
        </el-form-item>
        <el-form-item label="提交时间" prop="time">
          <el-input v-model="temp.time" />
        </el-form-item>
        <el-form-item label="用户账号" prop="useraccount">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="订单金额" prop="money">
          <el-input v-model="temp.money" />
        </el-form-item>
        <el-form-item label="支付方式" prop="pay">
          <el-input v-model="temp.phone" />
        </el-form-item>
        <el-form-item label="订单来源" prop="orderfrom">
          <el-input v-model="temp.source" />
        </el-form-item>
        <el-form-item label="订单状态" prop="orderstatus">
          <el-input v-model="temp.status" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="success" @click="dialogStatus === 'create' ? createData() : updateData()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList,
  updateFormData,
  createStudent
} from '@/api/student'
import pagination from '@/components/Pagination'

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  orderSn: null,
  receiverKeyword: null,
  status: null,
  orderType: null,
  sourceType: null,
  createTime: null
}

export default {
  components: {
    pagination
  },
  data() {
    const IDRule = (rule, value, callback) => {
      const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (this.temp.sfz === '' || this.temp.sfz === 'undefine') {
        callback(new Error('resident ID is required'))
      } else if (!reg.test(this.temp.sfz)) {
        callback(new Error('wrong format'))
      } else {
        callback()
      }
    }
    return {
      listQuey: Object.assign({}, defaultListQuery),
      operateType: null,
      multipleSelection: [],
      total: 0,
      list: null,
      listLoading: false,
      exportLoading: false,
      // show eidt dialog ?
      dialogVisible: false,
      temp: {
        id: null,
        oid: '',
        time: '',
        name: '',
        money: '',
        pay: '',
        source: '',
        status: ''
      },
      statusOptions: [
        {
          label: '待付款',
          value: 0
        },
        {
          label: '待发货',
          value: 1
        },
        {
          label: '已发货',
          value: 2
        },
        {
          label: '已完成',
          value: 3
        },
        {
          label: '已关闭',
          value: 4
        }
      ],
      orderTypeOptions: [
        {
          label: '正常订单',
          value: 0
        },
        {
          label: '秒杀订单',
          value: 1
        }
      ],
      sourceTypeOptions: [
        {
          label: 'PC订单',
          value: 0
        },
        {
          label: 'APP订单',
          value: 1
        }
      ],
      operateOptions: [
        {
          label: '批量发货',
          value: 1
        },
        {
          label: '关闭订单',
          value: 2
        },
        {
          label: '删除订单',
          value: 3
        }
      ],
      // search condition
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined
      },
      // create or edit
      dialogStatus: '',
      rules: {
        name: [{
          required: true,
          message: 'name is required',
          trigger: 'blur'
        }],
        xh: [{
          required: true,
          message: 'xh is required',
          trigger: 'blur'
        },
        {
          min: 8,
          max: 8,
          message: 'length of xh should be 8',
          trigger: 'blur'
        }
        ],
        sfz: [{
          validator: IDRule,
          trigger: 'blur',
          required: true
        }],
        email: [{
          type: 'email',
          required: true,
          message: 'please check your email address',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: 'phone number is required',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: 'address is required',
          trigger: 'blur'
        }],
        state: [{
          required: true,
          message: 'state is required',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      // send request and recieve data from backend
      getList(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // when user click on edit butoon, show edit dialog
    handleUpate(row) {
      this.temp = Object.assign({}, row)
      this.dialogVisible = true
      this.dialogStatus = 'update'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleDelete(row, index) {
      this.list.splice(index, 1)
      this.$notify({
        title: 'Success',
        message: 'Delete success',
        type: 'success',
        duration: 2000
      })
    },
    // Handle create record method
    handleCreate() {
      this.restTemp()
      this.dialogStatus = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random * 100) + 1024
          createStudent(this.temp).then(res => {
            this.list.unshift(this.temp)
            this.dialogVisible = false
            this.$notify({
              title: 'Success',
              message: 'Create success',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    restTemp() {
      this.temp = {
        id: null,
        oid: '',
        time: '',
        name: '',
        money: '',
        pay: '',
        source: '',
        status: '',
        // create or edit
        dialogStatus: ''
      }
    },
    // confirm update data
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          // send upate request
          updateFormData(tempData).then(res => {
            // finde index of data
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogVisible = false
            this.$notify({
              title: 'Success',
              message: 'Upate success',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>

</style>
